<script setup>


</script>

<template>
  <view class="back">
<!-- 学生信息   -->
    <view class="process-container1">
      <view class="process-header">
        <view class="pro-t">
          <text class="process-title">学生信息</text>
          <view class="pro-text">
            <text class="pro-text1">学生姓名：</text>
            <text class="pro-text2">天天</text>
            <br>
            <text class="pro-text1">学生学号：</text>
            <text class="pro-text2">24130403</text>
            <br>
            <text class="pro-text1">学院:</text>
            <text class="pro-text2">工商管理学院</text>
            <br>
            <text class="pro-text1">专业：</text>
            <text class="pro-text2">工商管理</text>
            <br>
            <text class="pro-text1">年级：</text>
            <text class="pro-text2">2023</text>
            <br>
            <text class="pro-text1">电话：</text>
            <text class="pro-text3">13080363356</text>
            <br>
            <text class="pro-text1">导师姓名：</text>
            <text class="pro-text2">张余杭</text>
            <br>
            <text class="pro-text1">辅导员姓名：</text>
            <text class="pro-text2">王天痕</text>
            <br>

          </view>
        </view>
        <text class="collapse-btn">收起↑</text>
      </view>


    </view>
<!--    留校登记记录-->
    <view class="process-container2">
      <view class="process-header">
        <view class="pro-t">
          <text class="process-title">留校登记记录</text>
          <view class="pro-text">
            <text class="pro-text4">留校原因：</text>
            <text class="pro-text5">不想回家</text>
            <br>
            <text class="pro-text4">计划留校开始时间：</text>
            <text class="pro-text5">2024年1月2日 00:00:00</text>
            <br>
            <text class="pro-text4">计划留校结束时间：</text>
            <text class="pro-text5">2024年1月3日 00:00:00</text>
            <br>
            <text class="pro-text4">家庭联系人姓名：</text>
            <text class="pro-text5">王军</text>
            <br>
            <text class="pro-text4">家庭联系人电话：</text>
            <text class="pro-text3">15888888888</text>
            <br>
            <text class="pro-text4">是否需要校内住宿：</text>
            <text class="pro-text5">不需要</text>
            <br>


          </view>
        </view>
        <text class="collapse-btn">收起↑</text>
      </view>


    </view>
<!--    审批流程-->
    <view class="process-container3">
      <view class="process-header">
        <text class="process-title">审批流程</text>
        <text class="collapse-btn">收起↑</text>

      </view>
      <view class="process-steps">
        <view class="step-item">
          <view class="step-dot dot-done"></view>
          <view class="step-content">
            <view class="step-avatar avatar-pink">张</view>
            <view class="step-info">
              <text class="step-role">发起人(学生)</text>
              <text class="step-name">张婉悠</text>
              <text class="step-status status-done">已发起</text>
            </view>
          </view>
        </view>
        <view class="step-item">
          <view class="step-dot dot-processing"></view>
          <view class="step-content">
            <view class="step-avatar avatar-purple">王</view>
            <view class="step-info">
              <text class="step-role">审批人(导师)</text>
              <text class="step-name">王小明</text>
              <text class="step-status status-processing">审批中</text>
            </view>
          </view>
        </view>
        <view class="step-item">
          <view class="step-dot dot-pending"></view>
          <view class="step-content">
            <view class="step-avatar avatar-orange">周</view>
            <view class="step-info">
              <text class="step-role">审批人(辅导员)</text>
              <text class="step-name">周一围</text>
              <text class="step-status status-pending">待审批</text>
            </view>
          </view>
        </view>
        <view class="step-item">
          <view class="step-dot dot-pending"></view>
          <view class="step-content">
            <view class="step-avatar avatar-purple">王</view>
            <view class="step-info">
              <text class="step-role">审批人(副书记/副院长)</text>
              <text class="step-name">王小明</text>
              <text class="step-status status-pending">待审批</text>
            </view>
          </view>
        </view>
      </view>

    </view>
<!--    签到记录-->
    <view class="process-container">
      <view class="process-header">
        <view class="pro-t">
          <text class="process-title">签到记录</text>
          <view class="pro-text">
            <text class="pro-text1">签到时间：</text>
            <text class="pro-text2">2024/01/03 00:00:00</text>
            <br>
            <text class="pro-text1">签到地点：</text>
            <text class="pro-text2">A地点：</text>
            <br>
          </view>
        </view>
      </view>
<!--        <text class="collapse-btn">收起↑</text>-->

  </view>
    </view>
</template>

<style scoped>
.status-processing {
  color: #007aff;
}
.pro-t{
  flex-direction: column;
}
.pro-text1{
  color: #262626;
  font-size: 14px;
  line-height: 25px;
}
.pro-text4{
  color: #262626;
  font-size: 14px;
  line-height: 28px;
}
.pro-text2{
  color:#797979;
  font-size: 14px;
  line-height: 25px;
}
.pro-text5{
  color:#797979;
  font-size: 14px;
  line-height: 28px;
}
.pro-text3{
  color:#006DFF;
  font-size: 14px;
  line-height: 25px;
}
.process-container {
  background-color: #fff;
  margin: 20px 12px 12px 12px;
  padding: 16px;
  height: 118px;
}
.process-container1 {
  background-color: #fff;
  margin: 20px 12px 12px 12px;
  padding: 16px;
  height: 250px;
}
.process-container2 {
  background-color: #fff;
  margin: 20px 12px 12px 12px;
  padding: 16px;
  height: 200px;
}
.process-container3 {
  background-color: #fff;
  margin: 20px 12px 12px 12px;
  padding: 16px;
  height: 430px;
}
.process-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

}
.process-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  line-height: 30px;
}
.collapse-btn {
  font-size: 14px;
  color: #007aff;
}

.back{
  background-color: #F2F4F7;
  padding-top: 20px;
  height: 1230px;
}
.text2{
  width: 112px;
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 16px;
  color: #717171;
  margin-left: 100px;
}
.process-steps {
  position: relative;
  margin-bottom: 24px;
}
.process-steps::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #e5e7eb;
}
.step-item {
  display: flex;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e5e7eb;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.dot-pending {
  background-color: #e5e7eb;
}
.step-content {
  display: flex;
  align-items: flex-start;
}
.step-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  margin-right: 12px;
  flex-shrink: 0;
}
.avatar-orange {
  background-color: #ffe0b2;
}
.avatar-purple {
  background-color: #d1c4e9;
}
.avatar-pink {
  background-color: #ffcdd2;
}
.step-info {
  flex: 1;
}
.step-role {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}
.step-name {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  display: block;
}
.step-status {
  font-size: 14px;
  margin-top: 4px;
  display: block;
}
.status-pending {
  color: #ff7d00;
}

</style>